<!-- 对应部门底下人员的弹出框，用来选择人员 -->
<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
    unmount-on-close
  >
    <template #title>
      <div>人员花名册</div>
    </template>
    <div class="header" style="margin-bottom: 20px">
      <div class="header-front">
        <a-space>
          <a-input-search
            :style="{ width: '220px' }"
            placeholder="姓名"
            search-button
            @search="onSearch"
            @press-enter="onSearch"
            v-model="nameSearch"
          />
        </a-space>
      </div>
      <div></div>
    </div>

    <div class="main">
      <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="姓名"
          data-index="name"
          :width="200"
          :sortable="{
            sortDirections: ['ascend', 'descend']
          }"
        >
        </a-table-column>
        <a-table-column :width="150" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-tooltip content="员工档案">
              <icon-font
                type="icon-details-def"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
                @click="goDetail(record.id)"
              />
            </a-tooltip>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </a-modal>
</template>

<script lang="tsx" setup>
import { GetOrganizationHuman } from '@/apis/management/human/humanRoster';
import { cloneDeep } from 'lodash';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框，
    rowType: 'radio' | 'check'; // 单选或多选
    returnType: 'id' | 'data'; // 返回的数据是id还是data
    type: '公司' | '部门'; // 查找公司还是部门底下的人员数据
    id: number; // 公司或部门id
  }>(),
  {
    visible: false,
    rowType: 'radio',
    returnType: 'data',
    type: '部门'
  }
);

const emit = defineEmits(['update:visible', 'departmentRosterEmit']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

// 表格属性
const args = reactive({
  rowSelection: {
    type: 'radio'
  }
});

watch(
  () => modalVisible.value,
  (visible) => {
    if (visible) {
      args.rowSelection.type = props.rowType;
    }
  }
);

const selectedListData = computed(() => tableRef.value.selectedListData);
const selectedList = computed(() => tableRef.value.selectedList);

let tableRef = ref();
let nameSearch = ref(''), // 姓名搜索框
  phoneSearch = ref(''); // 手机搜索框
// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res: any = await GetOrganizationHuman({
      ...pageData,
      typeName: props.type,
      id: props.id,
      name: nameSearch.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const onSearch = () => {
  refresh();
};
const refresh = () => {
  tableRef.value.loadData();
};
// 保存
const handleOk = () => {
  // const temp = cloneDeep(
  //   selectedListData.value[selectedListData.value.length - 1]
  // );
  let temp;
  if (props.rowType === 'radio' && props.returnType === 'id') {
    temp = cloneDeep(selectedList.value);
  } else if (props.rowType === 'radio' && props.returnType === 'data') {
    temp = cloneDeep(selectedListData.value[selectedListData.value.length - 1]);
  } else if (props.rowType === 'check' && props.returnType === 'id') {
    temp = cloneDeep(selectedListData.value);
  } else if (props.rowType === 'check' && props.returnType === 'data') {
    temp = cloneDeep(selectedListData.value);
  }

  emit('departmentRosterEmit', temp);
  // 清空选择器
  tableRef.value.selectedListData = [];
  tableRef.value.selectedList = [];
  modalVisible.value = false;
};

// 取消
const handleCancel = () => {
  // 清空选择器
  tableRef.value.selectedListData = [];
  tableRef.value.selectedList = [];
  modalVisible.value = false;
};
</script>

<style scoped lang="less"></style>
